<template>
  <div class="ac-wrap">
    <div class="sel">

        <span class="txt">活动名称</span>
        <input class="ac-name input" type="text" placeholder="活动名称" v-model="params.keyWord">

        <span class="txt">活动时间</span>
        <el-date-picker
          class="sel-date"
          v-model="params.startTime"
          type="date"
          placeholder="选择开始日期"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
        <el-date-picker
          v-model="params.endTime"
          type="date"
          placeholder="选择结束日期"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
        ></el-date-picker>

        <span class="txt">活动状态</span>
        <select class="ac-change" type="text" placeholder v-model="changeStates">
          <option value="0">请选择</option>
          <option value="1">待合作</option>
          <option value="2">待审核</option>
          <!-- <option value="3">已驳回 </option> -->
          <option value="4">待报名</option>
          <option value="5">已成团</option>
          <option value="6">待签到</option>
          <option value="7">已结束</option>
          <option value="8">已关闭</option>
        </select>
        <div class="sel-btn" @click="getAcList(changeStates)">搜索</div>
    </div>
    <div class="clear"></div>
    <div class="ac-tabs">
      <div :class="states == 0 ? 'ac-title  ac-title-active' : 'ac-title '" @click="getAcList(0)">全部</div>
      <div
        :class="states == 1 ? 'ac-title  ac-title-active' : 'ac-title '"
        @click="getAcList(1)"
      >待合作</div>
      <div
        :class="states == 2 ? 'ac-title  ac-title-active' : 'ac-title '"
        @click="getAcList(2)"
      >待审核</div>
      <div
        :class="states == 4 ? 'ac-title  ac-title-active' : 'ac-title '"
        @click="getAcList(4)"
      >待报名</div>
      <div
        :class="states == 5 ? 'ac-title  ac-title-active' : 'ac-title '"
        @click="getAcList(5)"
      >已成团</div>
      <div
        :class="states == 6 ? 'ac-title  ac-title-active' : 'ac-title '"
        @click="getAcList(6)"
      >待签到</div>
      <div
        :class="states == 7 ? 'ac-title  ac-title-active' : 'ac-title '"
        @click="getAcList(7)"
      >已结束</div>
      <div
        :class="states == 8 ? 'ac-title  ac-title-active' : 'ac-title '"
        @click="getAcList(8)"
      >已关闭</div>
    </div>
    <el-table :data="acList" stripe style="width: 100%">
      <el-table-column prop="serviceName" width="200" align="center" label="活动海报">
        <template slot-scope="scope">
          <div>
            <img
              :src="scope.row.activity_img"
              :style="{
            maxWidth: '100%',
            maxHeight: '100px',
            padding:'5px'
          }"
            >
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="activity_title" label="活动标题" align="center"></el-table-column>
      <el-table-column label="已报名" align="center">
        <template slot-scope="scope">
          <div>
            <div
              v-if="scope.row.states == 4"
            >{{scope.row.signCount}}人（还差{{scope.row.participate_min - scope.row.signCount}}人成团）</div>
            <div v-else>{{scope.row.signCount}}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="活动开始时间" align="center">
        <template slot-scope="scope">
          <div>{{setDate(scope.row.activity_time)}} {{setTime(scope.row.activity_time)}}</div>
        </template>
      </el-table-column>
      <el-table-column label="活动状态" align="center">
        <template slot-scope="scope">
          <div v-if=" scope.row.states== 1">待合作</div>
          <div v-if=" scope.row.states== 2">待审核</div>
          <div v-if=" scope.row.states== 3">已驳回</div>
          <div v-if=" scope.row.states== 4">待报名</div>
          <div v-if=" scope.row.states== 5">已成团</div>
          <div v-if=" scope.row.states== 6">待签到</div>
          <div v-if=" scope.row.states== 7">已结束</div>
          <div v-if=" scope.row.states== 8">已关闭</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <div>
            <el-popover placement="right" width="200" trigger="click">
              <div class="menu-list">
                <div v-if="roleList.search('活动管理') != '-1'">
                  <el-button @click="queryDetail( scope.row.id)" type="primary" size="mini" round>查看详情</el-button>
                  <div v-if=" scope.row.states == 2 && roleList.search('活动审核') != '-1'">
                    <el-button @click="adopt(  scope.row.id )" type="primary" size="mini" round>通过审核</el-button>
                  </div>
                </div>
                <div v-if=" scope.row.states == 2 && roleList.search('活动审核') != '-1'">
                  <el-button @click="reject(  scope.row.id )" type="primary" size="mini" round>驳回</el-button>
                </div>
                <div v-if="( scope.row.states == 5 ||  scope.row.states == 4 ||  scope.row.states == 6 ||  scope.row.states == 7) && roleList.search('活动管理') != '-1'">
                  <el-button @click="getErCode(  scope.row.id )" type="primary" size="mini" round>活动二维码</el-button>
                </div>
                <div v-if="( scope.row.states == 4 ||  scope.row.states == 5 ||  scope.row.states == 6) && roleList.search('精选推荐') != '-1'">
                  <el-button  @click="recommendation(  scope.row.id,  scope.row.jing_xuan )" type="primary" size="mini" round>{{  scope.row.jing_xuan == 1 ? '取消精选' : '推荐精选' }}</el-button>
                </div>
                <div v-if="( scope.row.states == 4 ||  scope.row.states == 5 ||  scope.row.states == 6) && roleList.search('标签设置') != '-1'">
                  <el-button @click="setTags(  scope.row.id )" type="primary" size="mini" round>设置标签</el-button>
                </div>
                <div >
                  <el-button @click="delAc( scope.row.shan_states, scope.row.id)" type="primary" size="mini" round>{{ scope.row.shan_states ? '恢复活动' : '删除活动'}}</el-button>
                </div>
              </div>
              <div slot="reference" class="show-menu">···</div>
            </el-popover>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: center;padding: 50px 0;">
      <el-pagination
        background
        layout="prev, pager, next"
        @current-change="changePage"
        :page-count="pageTotal"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import Global from "../tool/Global.vue";
import axios from "axios";
import qs from "qs"; // 将请求转换成form 表单提交形式
export default {
  data() {
    return {
      params: {
        page: 1,
        limit: 10,
        keyWord: "",
        startTime: "",
        endTime: "",
        states: ""
      },
      loading: false,
      changeStates: 0,
      states: 0,
      acList: [],
      pageTotal: 1,
      tagList: [],
      tagId: "",
      activeId: "",
      task: false,
      roleList: ""
    };
  },
  methods: {
    /**
     * 删除活动
     */
    delAc: function(bol, id) {
      let that = this;
      this.$confirm(!bol ? "是否删除活动?" : "是否恢复活动?").then(res => {
        axios({
          method: "post",
          url: `${that.$store.state.url}/tActivity/deleceActivity `,
          data: qs.stringify({
            id: id,
            states: !bol
          })
        }).then(res => {
          if (res.data.code == 0) {
            that.getAcList();
            let logData = {
                loginTime:this.$cookie.get("loginTime"),
                account:this.$cookie.get("userAccount"),
                content:!bol ? '删除活动' : '恢复活动',
              operationTime:this.setDate(new Date()) + ' ' +this.setTime(new Date())
              }
              axios({
          method: "post",
          url: `${that.$store.state.url}/log/addLog`,
          data: qs.stringify(logData)
        }).then( (res) => {
          console.log(res,'222')
        })
          } else {
            that.$alert(res.data.msg);
          }
        });
      });
    },
    /**
     *  获取权限
     */
    getRole: function() {
      let that = this;
      axios({
        method: "post",
        url: `${that.$store.state.url}/sysPermission/selectByEmployeeId`,
        data: qs.stringify({
          empId: that.$cookie.get("pid")
        })
      }).then(res => {
        let arr = res.data.data;
        let role = [];
        for (let i = 0; i < arr.length; i++) {
          role.push(arr[i].name);
        }
        this.roleList = role.toString();
      });
    },
    /**
     * 获取二维码
     */
    getErCode: function(id) {
      console.log(id);
      let that = this;
      this.$alert(
        `<img src="https://sharespace.cloudjoyclub.com//backstage/api/tActivity/getQrCode?id=${id}">`,
        "二维码",
        {
          dangerouslyUseHTMLString: true
        }
      );
      // })
    },
    /**
     * 关闭标签修改
     */
    closeTag: function() {
      this.task = false;
    },
    /**
     * 保存标签
     */
    saveTags: function() {
      var that = this
      axios
        .post(
          `${this.$store.state.url}/tActivity/addLable`,
          qs.stringify({
            id: this.activeId,
            lableId: this.tagId
          })
        )
        .then(response => {
          let res = response.data;
          if (res.code == 0) {
            this.$alert("设置成功");
            this.task = false;
          }
          let logData = {
                loginTime:this.$cookie.get("loginTime"),
                account:this.$cookie.get("userAccount"),
                content:'设置标签',
              operationTime:this.setDate(new Date()) + ' ' +this.setTime(new Date())
              }
              axios({
          method: "post",
          url: `${that.$store.state.url}/log/addLog`,
          data: qs.stringify(logData)
        }).then( (res) => {
          console.log(res,'222')
        })
        });
    },
    /**
     * 设置标签
     */
    changeTags: function(id) {
      this.tagId = id;
    },
    /*
     * 获取活动标签列表 tLabel/selectList
     */
    getTagList: function() {
      axios
        .post(`${this.$store.state.url}/tLabel/selectList`)
        .then(response => {
          let res = response.data;
          if (res.code == 0) {
            this.tagList = res.data;
            this.geTagChange();
          }
        });
    },
    /**
     * 设置选中
     */
    geTagChange: function() {
      axios
        .post(
          `${this.$store.state.url}/tActivity/selectLabelByActivityId`,
          qs.stringify({
            id: this.activeId
          })
        )
        .then(response => {
          let res = response.data;
          if (res.code == 0) {
            this.tagId = res.data.id;
          }
        });
    },
    // 分页
    changePage(argv) {
      console.log("请求页码");
      console.log(argv);
      this.params.page = argv;
      this.getAcList();
    },
    // 设置标签
    setTags(id) {
      this.task = true;
      this.activeId = id;
      this.getTagList();
    },
    // 设置精选
    recommendation(id, jing_xuan) {
      this.loading = true;
      var that = this
      axios
        .post(
          `${this.$store.state.url}/tActivity/updateJingXuan`,
          qs.stringify({
            id: id,
            jing: jing_xuan == 1 ? 0 : 1
          })
        )
        .then(
          response => {
            this.loading = false;
            let res = response.data;
            if (res.code == 0) {
              this.getAcList();
              this.$store.state.fn.success("设置成功");
              let logData = {
                loginTime:this.$cookie.get("loginTime"),
                account:this.$cookie.get("userAccount"),
                content:'设置精选活动',
              operationTime:this.setDate(new Date()) + ' ' +this.setTime(new Date())
              }
              axios({
          method: "post",
          url: `${that.$store.state.url}/log/addLog`,
          data: qs.stringify(logData)
        }).then( (res) => {
          console.log(res,'222')
        })
            }
          },
          () => {
            this.loading = false;
          }
        );
    },
    // 通过
    adopt(id) {
      this.loading = true;
      var that = this
      axios
        .post(
          `${this.$store.state.url}/tActivity/updateStates`,
          qs.stringify({
            id: id,
            states: 4
          })
        )
        .then(
          response => {
            this.loading = false;
            let res = response.data;
            if (res.code == 0) {
              this.$store.state.fn.success("审核已通过");
              this.getAcList();
              let logData = {
                loginTime:this.$cookie.get("loginTime"),
                account:this.$cookie.get("userAccount"),
                content:'通过活动审核',
              operationTime:this.setDate(new Date()) + ' ' +this.setTime(new Date())
              }
              axios({
          method: "post",
          url: `${that.$store.state.url}/log/addLog`,
          data: qs.stringify(logData)
        }).then( (res) => {
          console.log(res,'222')
        })
            }
          },
          () => {
            this.loading = false;
          }
        );
    },
    // 驳回
    reject(id) {
      var that = this
      this.$prompt("驳回原因", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(({ value }) => {
          this.loading = true;
          axios
            .post(
              `${this.$store.state.url}/tActivity/rejectActivity`,
              qs.stringify({
                id: id,
                reject: value
              })
            )
            .then(
              response => {
                this.loading = false;
                let res = response.data;
                if (res.code == 0) {
                  this.$store.state.fn.success("驳回成功");
                  this.getAcList();
                  let logData = {
                loginTime:this.$cookie.get("loginTime"),
                account:this.$cookie.get("userAccount"),
                content:'驳回活动',
              operationTime:this.setDate(new Date()) + ' ' +this.setTime(new Date())
              }
              axios({
          method: "post",
          url: `${that.$store.state.url}/log/addLog`,
          data: qs.stringify(logData)
        }).then( (res) => {
          console.log(res,'222')
        })
                }
              },
              () => {
                this.loading = false;
              }
            );
        })
        .catch(() => {});
    },
    /**
     *  查询活动列表
     */
    getAcList: function(num) {
      let that = this;
      that.params.states = num;
      that.states = num;
      if (num == 0) {
        that.params.states = "";
      }
      that.params.page = that.params.page || 1;
      this.loading = true;
      axios({
        method: "post",
        url: `${that.$store.state.url}/tActivity/selectList`,
        data: qs.stringify(that.params)
      }).then(
        res => {
          this.loading = false;
          if (res.data.code == 0) {
            this.pageTotal = Math.ceil(res.data.count / 10);
            that.acList = res.data.data;
          } else {
            alert(res.data.msg);
          }
        },
        () => {
          this.loading = false;
        }
      );
    },
    /**
     * 活动详情
     */
    queryDetail: function(id) {
      Global.activityId = id;
      this.$router.push({
        path: "/main/activityDetail",
        query: {
          id: id
        }
      });
    },
    /**
     * 根据时间毫秒数 返回年月日
     */
    setDate: function(str) {
      let times = new Date(str);
      return `${times.getFullYear()}-${
        times.getMonth() + 1 < 10
          ? "0" + (times.getMonth() + 1)
          : times.getMonth() + 1
      }-${times.getDate() < 10 ? "0" + times.getDate() : times.getDate()}`;
    },
    /**
     * 根据时间毫秒数 返回时分秒
     */
    setTime: function(str) {
      let times = new Date(str);
      return `${
        times.getHours() < 10 ? "0" + times.getHours() : times.getHours()
      }:${
        times.getMinutes() < 10 ? "0" + times.getMinutes() : times.getMinutes()
      }:${
        times.getSeconds() < 10 ? "0" + times.getSeconds() : times.getSeconds()
      }`;
    }
  },
  mounted() {
    this.getAcList(0);
    this.getRole();
  }
};
</script>
<style scoped>
.sel {
  height: 32px;
  line-height: 32px;
  padding: 23px 20px;
  background: #fff;
  min-width: 1050px;
}
.sel .txt {
  font-family: PingFangSC-Medium;
  font-size: 14px;
  color: rgba(37, 38, 49, 1);
  font-weight: bold;
  width: 42px;
}
.sel input {
  width: 200px;
  height: 32px;
  background: rgba(255, 255, 255, 1);
  border-radius: 16px;
  border: 1px solid rgba(232, 236, 239, 1);
  color: #888888;
  margin-left: 17px;
  text-align: center;
  box-sizing: border-box;
  outline: none;
}

.sel-btn {
  color: #fff;
  width: 80px;
  height: 32px;
  background: rgba(75, 116, 255, 1);
  border-radius: 24px;
  border: 1px solid rgba(75, 116, 255, 1);
  text-align: center;
  margin-left: 37px;
  display: inline-block;
  cursor: pointer;
}
.sel select {
  width: 200px;
  height: 32px;
  background: rgba(255, 255, 255, 1);
  border-radius: 16px;
  border: 1px solid rgba(232, 236, 239, 1);
  font-size: 14px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(152, 169, 188, 1);
  margin-left: 17px;
  padding-left: 20px;
}
.ac-tabs {
  /* width: 1303px; */
  height: 40px;
  text-align: center;
  font-size: 14px;
  margin-top: 20px;
  color: #778ca2;
  border-bottom: 1px solid #ddd;
  margin-bottom: 20px;
}
.ac-tabs > div {
  cursor: pointer;
}
.ac-title {
  /* width: 69px; */
  width: 12.5%;
  line-height: 28px;
  height: 40px;
  float: left;
  box-sizing: border-box;
  /* margin-left: 100px; */
}
.ac-title-active {
  border-bottom: 2px solid #4d7cfe;
  color: #4d7cfe;
}
.ac-title:first-child {
  margin-left: 0;
}
.show-menu {
  color: rgba(75, 116, 255, 1);
  cursor: pointer;
}
.menu-list div {
  margin: 5px;
  float: left;
  box-sizing: border-box;
  width: 40%;
}
@media screen and (max-width: 1400px) {
    .sel input {
      width: 180px;
      margin: 0px;
    }
    .sel select {
      width: 180px;
      margin: 0px;
    }
    .sel-btn {
      margin: 0px;    
    }
}
</style>
